<template>
    <div>
        <div class="layout-main">
            <el-row :gutter="12">
                <el-col :span="4">
                </el-col>
                <el-col :span="4">
                    <ul class="notification-menu">
                        <li :class="{'folder':true,'active':queryParams.type=='all'}" @click="searchType('all')">所有消息</li>
                        <li :class="{'folder':true,'active':queryParams.type=='newtasks'}" @click="searchType('newtasks')">新任务通知</li>
                        <li :class="{'folder':true,'active':queryParams.type=='instoovertimeck'}" @click="searchType('overtime')">超期提醒通知</li>
                        <li :class="{'folder':true,'active':queryParams.type=='feedback'}" @click="searchType('feedback')">反馈通知</li>
                        <li :class="{'folder':true,'active':queryParams.type=='sysupdate'}" @click="searchType('sysupdate')">系统更新通知</li>
                        <li :class="{'folder':true,'active':queryParams.type=='enroll'}" @click="searchType('enroll')">人员下发</li>
                    </ul>
                </el-col>
                <el-col :span="16">
                    <el-row class="notification-content-container" v-loading="loading">
                        <div class="header">
                            <label class="title">消息</label>
                            <el-button @click="goBack" size="small" style="float:right">标记为已读</el-button>
                        </div>
                        <div v-for="notice in notices" :key="notice.id" :class="{'notification-item':true,'unread':notice.state==0}" @click="showNext(notice)">
                            <div class="content">
                                <div class="title">
                                    <i v-if="notice.state==0" class="el-icon-bell"></i>{{notice.title}}
                                </div>
                                <div class="summary">
                                    {{notice.description}}
                                </div>
                            </div>
                            <div class="notification-meta">
                                {{notice.createTime |long2datetime}}
                            </div>
                        </div>
                        <div style="margin: 10px;overflow: hidden">
                            <div style="float: right;">
                                <Page :page-size="page.pageSize" show-total :total="page.total" :current="page.current" @on-change="changePage"></Page>
                            </div>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
        </div>
      
    </div>
</template>
<script>

export default {
    name: 'tinymce',
    data() {
        return {
            queryParams: {
                type: "all",
            },
            page: {
                total: 0,
                current: 1,
                pageSize: 10
            },
            notices: [

            ],
            loading: false
        };
    },
    components: {
      

    },
    mounted: function() {
        this.getList();
    },
    methods: {
        showNext: function(notice) {
            this.notice = notice;
            if (this.notice.type == "newtasks") {
                //到货或者缺货
                this.$refs['taskEditDialog'].showDialog(this.notice.extData);
            }
        },
        goBack: function() {
            // body...

            var me = this;
            me.loading = true;
            me.$http.post("/sys/notification/setAllReaded.action", { type: this.queryParams.type }).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.search();
                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });

        },
        searchType: function(type) {
            this.queryParams.type = type;
            this.search();
        },
        search: function() {
            this.page.current = 1;
            this.page.total = 0;
            this.getList();
        },
        changePage(current) {
            this.page.current = current;
            this.getList();
        },
        getList: function() {
            var me = this;
            var params = me.queryParams;
            params.current = me.page.current;
            params.pageSize = me.page.pageSize;
            me.loading = true;
            me.selected = [];
            me.$http.post("/sys/notification/getList.action", params).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.page.total = body.obj.totalCount;


                    me.notices = body.obj.list;

                }
                me.loading = false;
            }, response => {
                me.loading = false;
            });
        }
    }
}
</script>
<style>
.folder {
    list-style: none;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 30px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 13px;
    margin-bottom: 8px;
    color: #666;
    cursor: pointer;
}

.folder:first-child {
    margin-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

.folder.active {
    color: #ee4d2d;
}

.notification-menu {

    display: block;
    padding: 12px 16px;
    background: #fff;
    min-height: 294px;
}

.notification-content-container {
    background: #fff;
    padding: 20px 24px 24px;
}

.notification-content-container .header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 20px;
}

.notification-content-container .title {
    font-size: 22px;
    color: #333;
    height: 32px;
    line-height: 32px;
    font-weight: 500;
}

.notification-list {
    background: #fff;
    padding: 20px 24px 24px;
}

.notification-item {
    margin-top: 16px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
}

.notification-item .summary {
    font-size: 14px;
    color: #666;
    line-height: 18px;
    margin-bottom: 8px;
    width: 100%;
    word-break: break-all;
}

.notification-item .title {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
    width: 100%;
    word-break: break-all;
}

.notification-item.unread,
.notification-item.unread .title,
.notification-item.unread .summary {
    color: #ee4d2d
}

.notification-item:hover,
.notification-item:hover .title,
.notification-item:hover .summary {
    color: #409EFF
}

.notification-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
</style>